<!DOCTYPE html>
<html>
<head>
    <title>#{title}</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="description" content="">

    <link rel="stylesheet" href="../../lib/weui.min.css">
    <link rel="stylesheet" href="../../css/jquery-weui.css">
    <link rel="stylesheet" href="../../css/home.css">
<style>

    .city {
        display: block;
        position: relative;

    }
    .city .city-wrapper {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
    .city .city-wrapper .cities .title {
        height: 28px;
        padding-left: 16px;
        line-height: 28px;
        background-color: #f5f5f5;
        font-family: Helvetica;
        color: #878787;
    }
    .city .city-wrapper .cities .item {
        height: 44px;
        padding: 0 16px;
        line-height: 44px;
    }
    .city .city-wrapper .cities .item .name {
        display: block;
        position: relative;
    }
    .city .city-wrapper .cities .item .name:before,
    .city .city-wrapper .cities .item .name:after {
        display: block;
        position: absolute;
        border-top: 1px solid #e5e5e5;
        left: 0;
        width: 100%;
        content: ' ';
    }
    .city .city-wrapper .cities .item .name:before {
        display: none;
        top: 0;
    }
    .city .city-wrapper .cities .item .name:after {
        display: block;
        bottom: 0;
    }
    .city .city-wrapper .cities .item:active {
        background-color: #f0f0f0;
    }
    .city .city-wrapper .cities .item:last-child .name:after {
        display: none;
    }
    .city .city-wrapper .shortcut {
        position: absolute;
        z-index: 30;
        width: 40px;
        right: 0;
        font-family: Helvetica;
    }
    .city .city-wrapper .shortcut .item {
        height: 12px;
        padding-top: 4px;
        padding-left: 24px;
        text-align: center;
        color: #fa8919;
    }
    @media only screen and (max-height: 600px) {
        .city .city-wrapper .shortcut .item {
            padding-top: 3px;
        }
    }

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    ::-webkit-scrollbar-track-piece {
        background-color: rgba(0, 0, 0, 0.2);
        -webkit-border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:vertical {
        height: 5px;
        background-color: rgba(125, 125, 125, 0.7);
        -webkit-border-radius: 6px;
    }

    ::-webkit-scrollbar-thumb:horizontal {
        width: 5px;
        background-color: rgba(125, 125, 125, 0.7);
        -webkit-border-radius: 6px;
    }
    li {
        list-style: none;
    }
</style>
</head>
<body>
<div class="weui-flex">
    <div class="weui-flex__item">
        <div class="home-header">
            <h2>全部患者</h2>
        </div>

        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>

        <div style="">
            <div class="city">
                <div class="city-wrapper city-wrapper-hook">
                    <div class="scroller-hook"
                         style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
                        <div class="cities cities-hook">
                            <div class="title">★热门城市</div>
                            <ul>
                                <li class="item" data-name="北京市" data-id="1"><span class="border-1px name">北京市</span>
                                </li>
                                <li class="item" data-name="上海市" data-id="4"><span class="border-1px name">上海市</span>
                                </li>
                                <li class="item" data-name="深圳市" data-id="2"><span class="border-1px name">深圳市</span>
                                </li>
                                <li class="item" data-name="广州市" data-id="3"><span class="border-1px name">广州市</span>
                                </li>
                                <li class="item" data-name="武汉市" data-id="6"><span class="border-1px name">武汉市</span>
                                </li>
                            </ul>
                            <div class="title">A</div>
                            <ul>
                                <li class="item" data-name="鞍山市" data-id="64"><span class="border-1px name">鞍山市</span>
                                </li>
                                <li class="item" data-name="安庆市" data-id="149"><span class="border-1px name">安庆市</span>
                                </li>
                                <li class="item" data-name="安阳市" data-id="174"><span class="border-1px name">安阳市</span>
                                </li>

                            </ul>
                            <div class="title">B</div>
                            <ul>
                                <li class="item" data-name="北京市" data-id="1"><span class="border-1px name">北京市</span>
                                </li>
                                <li class="item" data-name="保定市" data-id="62"><span class="border-1px name">保定市</span>
                                </li>
                                <li class="item" data-name="包头市" data-id="63"><span class="border-1px name">包头市</span>
                                </li>
                                <li class="item" data-name="本溪市" data-id="77"><span class="border-1px name">本溪市</span>
                                </li>
                            </ul>
                            <div class="title">C</div>
                            <ul>
                                <li class="item" data-name="成都市" data-id="17"><span class="border-1px name">成都市</span>
                                </li>
                                <li class="item" data-name="重庆市" data-id="18"><span class="border-1px name">重庆市</span>
                                </li>
                                <li class="item" data-name="长沙市" data-id="24"><span class="border-1px name">长沙市</span>
                                </li>
                                <li class="item" data-name="长春市" data-id="25"><span class="border-1px name">长春市</span>
                                </li>

                            </ul>
                            <div class="title">D</div>
                            <ul>
                                <li class="item" data-name="大连市" data-id="14"><span class="border-1px name">大连市</span>
                                </li>
                                <li class="item" data-name="东莞市" data-id="21"><span class="border-1px name">东莞市</span>
                                </li>
                                <li class="item" data-name="大庆市" data-id="48"><span class="border-1px name">大庆市</span>
                                </li>
                                <li class="item" data-name="东营市" data-id="73"><span class="border-1px name">东营市</span>
                                </li>

                            </ul>
                            <div class="title">E</div>
                            <ul>
                                <li class="item" data-name="鄂尔多斯市" data-id="43"><span
                                        class="border-1px name">鄂尔多斯市</span></li>
                                <li class="item" data-name="鄂州市" data-id="230"><span class="border-1px name">鄂州市</span>
                                </li>
                                <li class="item" data-name="恩施州" data-id="235"><span class="border-1px name">恩施州</span>
                                </li>
                            </ul>
                            <div class="title">F</div>
                            <ul>
                                <li class="item" data-name="福州市" data-id="34"><span class="border-1px name">福州市</span>
                                </li>
                                <li class="item" data-name="佛山市" data-id="36"><span class="border-1px name">佛山市</span>
                                </li>
                                <li class="item" data-name="抚顺市" data-id="66"><span class="border-1px name">抚顺市</span>
                                </li>
                                <li class="item" data-name="阜新市" data-id="164"><span class="border-1px name">阜新市</span>
                                </li>
                                <li class="item" data-name="阜阳市" data-id="188"><span class="border-1px name">阜阳市</span>
                                </li>
                                <li class="item" data-name="抚州市" data-id="223"><span class="border-1px name">抚州市</span>
                                </li>

                            </ul>
                            <div class="title">G</div>
                            <ul>
                                <li class="item" data-name="广州市" data-id="3"><span class="border-1px name">广州市</span>
                                </li>
                                <li class="item" data-name="贵阳市" data-id="82"><span class="border-1px name">贵阳市</span>
                                </li>
                                <li class="item" data-name="赣州市" data-id="102"><span class="border-1px name">赣州市</span>
                                </li>

                            </ul>
                            <div class="title">H</div>
                            <ul>
                                <li class="item" data-name="杭州市" data-id="5"><span class="border-1px name">杭州市</span>
                                </li>
                                <li class="item" data-name="合肥市" data-id="15"><span class="border-1px name">合肥市</span>
                                </li>
                                <li class="item" data-name="哈尔滨市" data-id="16"><span class="border-1px name">哈尔滨市</span>
                                </li>

                            </ul>
                        </div>
                    </div>
                    <div class="shortcut shortcut-hook" style="top: 136px;">
                        <ul>
                            <li data-anchor="★" class="item">★</li>
                            <li data-anchor="A" class="item">A</li>
                            <li data-anchor="B" class="item">B</li>
                            <li data-anchor="C" class="item">C</li>
                            <li data-anchor="D" class="item">D</li>
                            <li data-anchor="E" class="item">E</li>
                            <li data-anchor="F" class="item">F</li>
                            <li data-anchor="G" class="item">G</li>
                            <li data-anchor="H" class="item">H</li>
                            <li data-anchor="J" class="item">J</li>
                            <li data-anchor="K" class="item">K</li>
                            <li data-anchor="L" class="item">L</li>
                            <li data-anchor="M" class="item">M</li>
                            <li data-anchor="N" class="item">N</li>
                            <li data-anchor="P" class="item">P</li>
                            <li data-anchor="Q" class="item">Q</li>
                            <li data-anchor="R" class="item">R</li>
                            <li data-anchor="S" class="item">S</li>
                            <li data-anchor="T" class="item">T</li>
                            <li data-anchor="W" class="item">W</li>
                            <li data-anchor="X" class="item">X</li>
                            <li data-anchor="Y" class="item">Y</li>
                            <li data-anchor="Z" class="item">Z</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/plugins/scroll/bscroll.min.js"></script>
<script>
    var cityWrapper = document.querySelector('.city-wrapper-hook');
    var cityScroller = document.querySelector('.scroller-hook');
    var cities = document.querySelector('.cities-hook');
    var shortcut = document.querySelector('.shortcut-hook');

    var scroll;

    var shortcutList = [];
    var anchorMap = {};

    //bind Event
    function bindEvent() {
        //shortcut.style.top = (cityWrapper.clientHeight - shortcut.clientHeight) / 2 + 'px';
        scroll = new window.BScroll(cityWrapper, {
            probeType: 3
        });
        scroll.scrollTo(0, 50);

        var touch = {};
        var firstTouch;

        shortcut.addEventListener('touchstart', function (e) {
            var anchor = e.target.getAttribute('data-anchor');
            firstTouch = e.touches[0];
            touch.y1 = firstTouch.pageY;
            touch.anchor = anchor;
            scrollTo(anchor);
        });
        shortcut.addEventListener('touchmove', function (e) {
            firstTouch = e.touches[0];
            touch.y2 = firstTouch.pageY;
            var anchorHeight = 16;
            var delta = (touch.y2 - touch.y1) / anchorHeight | 0;
            var anchor = shortcutList[shortcutList.indexOf(touch.anchor) + delta];
            scrollTo(anchor);
            e.preventDefault();
            e.stopPropagation();
        });
        function scrollTo(anchor) {
            var maxScrollY = cityWrapper.clientHeight - cityScroller.clientHeight;
            var y = Math.min(0, Math.max(maxScrollY, anchorMap[anchor]));
            if (typeof y !== 'undefined') {
                scroll.scrollTo(0, y);
            }
        }
    }

    bindEvent();
</script>
</body>
</html>